<template>
  <el-form
    ref="elForm"
    :model="formData"
    size="medium"
    label-width="100px"
    style="height:300px"
  >
    <el-col :span="24">
      <el-col :span="24">
        <el-col :xs="24" :md="12" :lg="24" style="padding:0px">
          <el-col :span="24">
            <el-form-item
              label="控件名称"
              :rules="rules.controlname"
              label-width="100px"
              prop="controlname"
            >
              <el-input
                placeholder="请输入控件名称"
                v-model="formData.controlname"
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :xs="24" :md="12" :lg="24" style="padding:0px">
          <el-col :span="24">
            <el-form-item
              label="控件分类"
              :rules="rules.controlType"
              label-width="100px"
              prop="controlType"
            >
              <el-select
                placeholder="控件分类"
                v-model="formData.controlType"
                style="width: 100%;"
              >
                <el-option
                  v-for="item in questionConfigList"
                  :key="item.title"
                  :label="item.title"
                  :value="item.title"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :xs="24" :md="12" :lg="24" style="padding:0px">
          <el-col :span="24" style="height:">
            <el-form-item
              label="访问类别"
              :rules="rules.visitType"
              prop="visitType"
              label-width="100px"
            >
              <el-select
                placeholder="请选择访问类别"
                v-model="formData.visitType"
                style="width: 100%;"
              >
                <el-option label="公共" value="0"> </el-option>
                <el-option label="私有" value="1"> </el-option>
                <el-option label="分享" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :xs="24" :md="24" :lg="24" style="padding:0px">
          <el-col :span="24" style="height:">
            <el-form-item label="控件描述" label-width="100px">
              <el-input
                type="textarea"
                rows=""
                placeholder="请输入控件描述"
                v-model="formData.remarkdescribe"
                maxlength="200"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :xs="24" :md="24" :lg="24" style="padding:0px">
          <el-form-item size="large" style="float: right;">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="funclose()">关闭</el-button>
          </el-form-item>
        </el-col>
      </el-col>
    </el-col>
  </el-form>
</template>
<script>
import { questionConfigJson } from '@/components/formdesign/questionconfig.js'
import { addUserControl } from '@/api/tappusercontrol.js'
import { addComControl } from '@/api/tappcomcontrol.js'
export default {
  props: ['elementdata'],
  data() {
    return {
      questionConfigList: questionConfigJson,
      formData: {
        controlname: '',
        controlJson: '',
        controlType: '',
        visitType: '',
        remarkdescribe: ''
      },
      rules: {
        controlname: [
          {
            required: true,
            message: '控件名称必填',
            trigger: 'blur'
          }
        ],
        controlType: [
          {
            required: true,
            message: '控件类型必填',
            trigger: 'blur'
          }
        ],
        visitType: [
          {
            required: true,
            message: '访问类型必填',
            trigger: 'blur'
          }
        ]
      },
      layoutArry: ['gridPanel', 'tabs', 'collapse']
    }
  },
  created() {
    console.log(this.questionConfigList)
    this.formData.controlname = this.elementdata.title
  },
  methods: {
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        this.formData.controlJson = JSON.stringify(this.elementdata)
        if (this.layoutArry.indexOf(this.elementdata.type) >= 0) {
          addUserControl(this.formData).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功！')
              this.$emit('close')
            }
          })
        } else {
          addComControl(this.formData).then(res => {
            if (res.code === 0) {
              this.$message.success('保存成功！')
              this.$emit('close')
            }
          })
        }
      })
    },
    funclose() {
      this.$emit('close')
    }
  }
}
</script>
